<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="企业名称：">
          <el-input v-model="searchForm.polluteName" placeholder="请输入企业名称" clearable style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="时间：">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 300px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
        <el-table-column prop="rank" label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="PolluteName" label="企业名称" min-width="200" align="center"></el-table-column>
        <el-table-column prop="monitorCount" label="监测次数" width="260" align="center"></el-table-column>
        <el-table-column prop="standardsCount" label="达标次数" width="260" align="center"></el-table-column>
        <el-table-column prop="rate" label="达标率" width="260" align="center">
         
        </el-table-column>
      </el-table>
      
      <!-- 分页区域 -->
      <div class="pagination-container" v-if="total > 0">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { statisticMonitorRate, polluteTree } from './api.js'
export default {
  name: 'MonitoringStatistics',
  data() {
    return {
      loading: false,
      companyList: [],
      searchForm: {
        polluteName: '',
        dateRange: []
      },
      tableData: [

      ],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    this.searchForm.dateRange = [this.parseTime(new Date(), '{y}-{m}-{d}'), this.parseTime(new Date(), '{y}-{m}-{d}')]
    this.query();
  },
  methods: {
    async query() {
      // await this.polluteTree();
      this.getList();
    },
     polluteTree() {
      this.companyList = [];
      polluteTree().then(res => {
        if (res.code == '200') {
          let list = res.data || [];
          for (let item of list) {
           let children = item.children || [];
           for (let child of children) {
            this.companyList.push({
              polluteName: child.name,
              companyCode: child.id
            })
           }
          }
        }
      })
    },

    // 获取数据列表
    // 获取数据列表
    getList() {
      this.loading = true;
      // 构建请求参数，包含搜索条件和分页信息
      const params = {
        beginTime: this.searchForm.dateRange[0],
        endTime: this.searchForm.dateRange[1],
        polluteName: this.searchForm.polluteName,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      statisticMonitorRate(params).then(res => {
        this.loading = false;
        // 假设接口返回格式包含rows和total
        if (res && res.rows) {
          this.tableData = res.rows;
          this.total = res.total || 0;
        }
      }).catch(error => {
        this.loading = false;
        console.error('获取数据失败:', error);
      })
    },
    // 搜索按钮点击事件
    handleSearch() {
      this.pageNum = 1; // 搜索时重置到第一页
      this.getList();
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1; // 改变每页条数时重置到第一页
      this.getList();
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.demo-form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.el-form-item {
  margin-right: 10px;
  margin-bottom: 15px;
}

.table-container {
  background: #ffffff;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.table-container >>> .el-table {
  flex: 1;
  min-height: 0;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>